import React, { Component, PropTypes } from 'react';
import { ContextMenu, MenuItem, connect } from 'react-contextmenu';
import { noop } from 'lodash';

import { NextActionOptions } from '../actions/path-input-bar-actions.js';

@connect
export default class TreeViewContextMenu extends Component {
    static propTypes = {
        /**
         * 显示路径输入栏
         * @type {Function}
         */
        showPathInputBar: PropTypes.func,

        /**
         * 显示确认删除提示框
         * @type {Function}
         */
        showConfirmDeleteDialog: PropTypes.func
    };

    /**
     * 创建文件夹
     * @param  {string} path
     * @return {Object}
     */
    handleCreateDir(path) {
        return this.props.showPathInputBar(
            '目录名称:',
            NextActionOptions.CREATE_DIR,
            { origin: path });
    }

    /**
     * 创建文件
     * @param  {string} path
     * @return {Object}
     */
    handleCreateFile(path) {
        return this.props.showPathInputBar(
            '文件名称:',
            NextActionOptions.CREATE_FILE,
            { origin: path });
    }

    /**
     * 移动文件 (重命名)
     * @param  {string} path
     * @return {Object}
     */
    handleMovePath(path) {
        return this.props.showPathInputBar(
            '新的路径:',
            NextActionOptions.MOVE_PATH,
            { origin: path });
    }

    render() {
        const { item, showConfirmDeleteDialog } = this.props;

        if (item.isDir) {
            return (
                <ContextMenu identifier="tree-view-context-menu">
                    <MenuItem disabled onClick={noop}>{item.path}</MenuItem>
                    <MenuItem onClick={() => this.handleCreateDir(item.path)}>创建文件夹</MenuItem>
                    <MenuItem onClick={() => this.handleCreateFile(item.path)}>创建文件</MenuItem>
                    <MenuItem onClick={() => this.handleMovePath(item.path)}>重命名</MenuItem>
                    <MenuItem onClick={() => showConfirmDeleteDialog(item.path, true)}>删除文件夹</MenuItem>
                </ContextMenu>
            );
        }

        return (
            <ContextMenu identifier="tree-view-context-menu">
                <MenuItem disabled onClick={() => console.log(1)}>{item.path}</MenuItem>
                <MenuItem onClick={() => this.handleMovePath(item.path)}>重命名</MenuItem>
                <MenuItem onClick={() => showConfirmDeleteDialog(item.path)}>删除文件</MenuItem>
            </ContextMenu>
        );
    }
}